<template>
	<view>
		<view class="main">
			<!-- 昵称输入 -->
			<view class="input-container">
				<text class="input-label">输入昵称</text>
				<input 
					type="text" 
					class="input" 
					v-model="nicName" 
					placeholder="请输入您的昵称"
				/>
			</view>

			<!-- 自定义头像区域 -->
			<view class="custom-avatar">
				<text class="avatar-tip">我的头像，点击可使用自定义图片</text>
				<view class="avatar-preview" @click="chooseAvatar">
					<image 
						:src="nic.url || isnic" 
						mode="aspectFill" 
						class="avatar-img"
					></image>
				</view>
			</view>

			<!-- 临时头像列表 -->
			<view class="nicPic" v-if="!showEmpty">
				<!-- 加载中提示 -->
				<view class="loading-tip" v-if="loading">加载中...</view>
				
				<view class="pic-item" v-for="(item, index) in nicPic" :key="index">
					<image 
						:src="item.url" 
						mode="aspectFit" 
						@click="selectTempAvatar(item)"
						class="pic-img"
					></image>
				</view>

				<!-- 分页按钮 -->
				<view class="page">
					<view 
						class="page-btn" 
						:class="{ disabled: current === 1 }"
						@click="pageChange('-')"
					>前一页</view>
					<view 
						class="page-btn" 
						:class="{ disabled: !hasMore || loading }"
						@click="pageChange('+')"
					>后一页</view>
				</view>
			</view>

			<!-- 空数据提示 -->
			<view class="empty-tip" v-if="showEmpty && !loading">
				暂无头像数据，请稍后重试
			</view>

			<!-- 操作按钮 -->
			<view class="submit-btn" @click="handleSubmit" :class="{ disabled: loading }">提 交</view>
			<view class="cancel-btn" @click="handleCancel" :class="{ disabled: loading }">取消返回</view>
		</view>
	</view>
</template>

<script>
const db = uniCloud.databaseForJQL();
export default {
	data() {
		return {
			nicPic: [], // 临时头像列表
			current: 1, // 当前页码（从1开始）
			pageSize: 9, // 每页条数
			nicName: '', // 昵称
			nic: {
				url: '', // 头像地址（临时/自定义）
				type: '' // linli(临时) / custom(自定义)
			},
			isnic: '/static/nicPic/add.png', // 默认头像占位图
			loading: false, // 加载状态
			hasMore: true, // 是否有更多数据
			showEmpty: false // 是否显示空数据
		};
	},
	onLoad() {
		// 初始化昵称（从store获取）
		if (this.$store?.state?.msg?.user?.nicName) {
			this.nicName = this.$store.state.msg.user.nicName;
		}
		// 加载临时头像列表
		this.getNicPic();
	},
	methods: {
		/**
		 * 加载临时头像列表（带防抖+分页）
		 */
		async getNicPic() {
			if (this.loading) return;
			this.loading = true;
			this.showEmpty = false;

			// 计算跳过条数：(当前页-1)*每页条数
			const skip = (this.current - 1) * this.pageSize;

			try {
				const res = await db.collection('nicpic').limit(this.pageSize).skip(skip).get();
				console.log('获取临时头像:', res);

				// 数据处理：第一页覆盖，后续页追加
				if (res.data && res.data.length > 0) {
					this.nicPic = res.data 
					// 有更多数据：当前返回条数等于每页条数
					this.hasMore = res.data.length === this.pageSize;
				} else {
					this.hasMore = false;
					// 第一页无数据则显示空状态
					if (this.current === 1) {
						this.nicPic = [];
						this.showEmpty = true;
					}
				}
			} catch (e) {
				console.error('加载头像列表失败:', e);
				uni.showToast({
					title: '加载失败，请重试',
					icon: 'none',
					duration: 2000
				});
			} finally {
				this.loading = false;
			}
		},

		/**
		 * 分页切换
		 * @param {String} type - '+' 下一页 / '-' 上一页
		 */
		pageChange(type) {
			if (this.loading) return; // 加载中禁止切换

			if (type === '+') {
				// 有更多数据才允许下一页
				if (this.hasMore) {
					this.current++;
					this.getNicPic();
				}
			} else if (type === '-') {
				// 最小页码为1
				if (this.current > 1) {
					this.current--;
					this.getNicPic();
				}
			}
		},

		/**
		 * 选择临时头像
		 * @param {Object} item - 头像数据
		 */
		selectTempAvatar(item) {
			this.nic = {
				url: item.url,
				type: 'linli'
			};
		},

		/**
		 * 选择自定义头像（相册/相机）
		 */
	chooseAvatar() {
	  const _this = this;
	  uni.chooseImage({
	    count: 1,
	    sourceType: ['album', 'camera'],
	    success: (res) => {
	      const tempUrl = res.tempFilePaths[0];
	      _this.nic.url = tempUrl;
	      _this.nic.type = 'custom'; // 修正拼写：custom
	      // 跳转到裁剪页面
	      uni.navigateTo({
	        url: `../avatarManger/upload?src=${encodeURIComponent(tempUrl)}`,
	        events: {
	          acceptDataFromOpenedPage: function (data) {
	            console.log('裁剪后的图片路径：', data.localUrl);
	            _this.nic.url = data.localUrl; // 更新为裁剪后的路径
	          }
	        }
	      });
	    },
	    fail: (err) => {
	      console.error('选择图片失败:', err);
	    }
	  });
	},

		/**
		 * 取消返回
		 */
		handleCancel() {
			if (this.loading) return;
			uni.navigateBack();
		},

		/**
		 * 提交信息（昵称+头像）
		 */
		async handleSubmit() {
			// 昵称校验
			if (!this.nicName.trim()) {
				uni.showToast({
					title: '昵称不能为空',
					icon: 'none'
				});
				return;
			}

			// 无头像选择时提示
			if (!this.nic.type) {
				uni.showToast({
					title: '请选择头像',
					icon: 'none'
				});
				return;
			}

			if (this.loading) return;
			this.loading = true;

			try {
				let updateData = {
					nicName: this.nicName.trim(),
					nicPic: { url: '', fileID: '' }
				};

				// 临时头像：直接更新
				if (this.nic.type === 'linli') {
					updateData.nicPic.url = this.nic.url;
					await this.updateUserInfo(updateData);
				}

				// 自定义头像：先上传再更新
				if (this.nic.type === 'custom') {
					// 提取文件扩展名
					const extIndex = this.nic.url.lastIndexOf('.');
					if (extIndex === -1) {
						throw new Error('图片格式错误');
					}
					const picExt = this.nic.url.slice(extIndex + 1);
					const fileName = `${Date.now()}.${picExt}`;
					const cloudPath = `avatars/${this.$store.state.msg.user.userTel}/${fileName}`;

					// 上传文件到云存储
					const uploadRes = await uniCloud.uploadFile({
						cloudPath,
						filePath: this.nic.url
					});

					// 获取临时访问链接
					const urlRes = await uniCloud.getTempFileURL({
						fileList: [uploadRes.fileID]
					});

					if (!urlRes || !urlRes.fileList[0]?.tempFileURL) {
						throw new Error('获取头像链接失败');
					}

					// 组装更新数据
					updateData.nicPic = {
						url: urlRes.fileList[0].tempFileURL,
						fileID: uploadRes.fileID
					};

					// 更新用户信息
					await this.updateUserInfo(updateData);
				}
			} catch (err) {
				console.error('提交失败:', err);
				uni.showToast({
					title: err.message || '提交失败，请重试',
					icon: 'none'
				});
			} finally {
				this.loading = false;
			}
		},

		/**
		 * 更新用户信息到数据库
		 * @param {Object} updateData - 要更新的数据
		 */
		async updateUserInfo(updateData) {
			const userTel = this.$store.state.msg.user.userTel;
			if (!userTel) {
				throw new Error('用户信息异常');
			}

			uni.showLoading({ title: '提交中...' });

			try {
				const res = await db
					.collection('linli-user')
					.where({ userTel })
					.update(updateData);

				console.log('更新用户信息:', res);

				// 校验更新结果（JQL update返回格式：{ code: 0, updated: 1 }）
				if (res.code !== 0 || res.updated === 0) {
					throw new Error('更新失败，请稍后重试');
				}

				// 更新store和本地存储
				const newUser = {
					...this.$store.state.msg.user,
					...updateData
				};
				this.$store.commit('msg/SET_user', newUser);
				uni.setStorageSync('user', JSON.stringify(newUser)); // 序列化存储

				// 提示并跳转（用redirectTo避免返回层级问题）
				uni.showToast({
					title: '提交成功',
					icon: 'success'
				});
				setTimeout(() => {
					uni.redirectTo({ url: '/pages/main/main' });
				}, 1500);
			} catch (e) {
				throw e; // 抛给上层处理
			} finally {
				uni.hideLoading();
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.main {
	display: flex;
	min-height: 100vh;
	background: #faf0e6;
	flex-direction: column;
	align-items: center;
	padding: 20rpx;
	box-sizing: border-box;
}

// 昵称输入容器
.input-container {
	display: flex;
	align-items: center;
	margin: 100rpx 0 30rpx;
	width: 80%;

	.input-label {
		font-size: 28rpx;
		color: #333;
		margin-right: 10rpx;
	}

	.input {
		flex: 1;
		border: 1px solid #ffa726;
		background: #fff;
		border-radius: 5rpx;
		padding: 10rpx;
		height: 60rpx;
		font-size: 28rpx;
		box-sizing: border-box;
	}
}

// 自定义头像区域
.custom-avatar {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-bottom: 50rpx;
	width: 80%;

	.avatar-tip {
		font-size: 28rpx;
		color: #4a3120; // 补全6位颜色值
		margin-bottom: 20rpx;
	}

	.avatar-preview {
		width: 200rpx;
		height: 200rpx;
		border: 1px solid #ccc;
		border-radius: 50%;
		overflow: hidden;
		display: flex;
		justify-content: center;
		align-items: center;

		.avatar-img {
			width: 100%;
			height: 100%;
		}
	}
}

// 临时头像列表
.nicPic {
	width: 80%;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	margin-bottom: 50rpx;

	.loading-tip {
		width: 100%;
		text-align: center;
		font-size: 28rpx;
		color: #999;
		padding: 20rpx 0;
	}

	.pic-item {
		width: 150rpx;
		height: 150rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-top: 20rpx;
		background: #faf0e6;

		.pic-img {
			width: 150rpx;
			height: 150rpx;
			border-radius: 8rpx;
		}
	}

	.page {
		width: 100%;
		display: flex;
		justify-content: center;
		gap: 50rpx;
		margin-top: 20rpx;

		.page-btn {
			font-size: 28rpx;
			color: #333;
			padding: 10rpx 20rpx;
			border-radius: 5rpx;
			&.disabled {
				color: #ccc;
				pointer-events: none; // 禁用点击
			}
			&:active {
				background: #eee;
			}
		}
	}
}

// 空数据提示
.empty-tip {
	font-size: 28rpx;
	color: #999;
	padding: 50rpx 0;
}

// 按钮样式
.submit-btn,
.cancel-btn {
	width: 400rpx;
	height: 80rpx;
	line-height: 80rpx;
	text-align: center;
	border-radius: 5rpx;
	font-size: 32rpx;
	font-weight: 500;
	color: #fff;
	margin-top: 30rpx;
	&.disabled {
		opacity: 0.6;
		pointer-events: none;
	}
}

.submit-btn {
	background-color: #ffa726;
	&:active {
		background-color: #e69500;
	}
}

.cancel-btn {
	background-color: #556b2f;
	&:active {
		background-color: #465826;
	}
}
</style>